<template>
  <div class="k4">
    <h3><dv-decoration-7>各班挂科率</dv-decoration-7></h3>
    <dv-border-box-10 :color="['#50649a', '#50649b']">
      <div ref="myChart6" id="passDiv"></div>
    </dv-border-box-10>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { zhuti } from "../assets/index.js";
import pubsub from "pubsub-js";
export default {
  data() {
    return {
      // 这里为x（横）轴的学期要是大一的就一个学期，图就有点没眼看
      semester: ["第一学期", "第二学期"],
      //班级,其实班级这里也没必要动因为就三个班（
      // 其实是你要是不是三个班可能会出bug所以你自己决定一下吧因为我就配置三个表的配置）
      manyclass: ["一班", "二班", "三班"],
      //一班的挂科率数据
      onepass: [],
      //二班的挂科率数据
      twopass: [],
      //三班的挂科率数据
      threepass: [],
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("selectMajorInfo", (msgName, data) => {
      console.log("订阅各班挂科率", data);
      this.onepass = [];
      this.twopass = [];
      this.threepass = [];
      const year = data.year;
      if (year == 2023) {
        // 五个学期
        this.semester = ["第一学期", "第二学期"];

        for (let index = 0; index < 2; index++) {
          this.onepass.push(Math.floor(Math.random() * (3 - 1 + 1)) + 1);
          this.twopass.push(Math.floor(Math.random() * (4 - 1 + 1)) + 1);
          this.threepass.push(Math.floor(Math.random() * (4 - 1 + 1)) + 1);
        }
       
      } else if (year == 2022) {
        // 三个学期
        this.semester = ["第一学期", "第二学期", "第三学期"];

        for (let index = 0; index < 3; index++) {
          this.onepass.push(Math.floor(Math.random() * (3 - 1 + 1)) + 1);
          this.twopass.push(Math.floor(Math.random() * (4 - 1 + 1)) + 1);
          this.threepass.push(Math.floor(Math.random() * (4 - 1 + 1)) + 1);
        }
        
      } else if (year == 2021) {
        // 五个学期
        this.semester = [
          "第一学期",
          "第二学期",
          "第三学期",
          "第四学期",
          "第五学期",
        ];
        for (let index = 0; index < 5; index++) {
          this.onepass.push(Math.floor(Math.random() * (3 - 1 + 1)) + 1);
          this.twopass.push(Math.floor(Math.random() * (4 - 1 + 1)) + 1);
          this.threepass.push(Math.floor(Math.random() * (4 - 1 + 1)) + 1);
        }
      
      } else if (year == 2020) {
        // 五个学期
        this.semester = [
          "第一学期",
          "第二学期",
          "第三学期",
          "第四学期",
          "第五学期",
          "第六学期",
          "第七学期",
        ];

        for (let index = 0; index < 7; index++) {
          this.onepass.push(Math.floor(Math.random() * (3 - 1 + 1)) + 1);
          this.twopass.push(Math.floor(Math.random() * (4 - 1 + 1)) + 1);
          this.threepass.push(Math.floor(Math.random() * (4 - 1 + 1)) + 1);
        }
       
      }
       this.$nextTick(() => {
          this.initialize();
        });
    });
    //第一次进入页面初始化数据
    this.pubId = pubsub.subscribe("year", (msgName, data) => {
      this.onepass.push(Math.floor(Math.random() * (5 - 1 + 1)) + 1);
      this.onepass.push(Math.floor(Math.random() * (8 - 1 + 1)) + 0);
      this.twopass.push(Math.floor(Math.random() * (6 - 1 + 1)) + 0);
      this.twopass.push(Math.floor(Math.random() * (4 - 1 + 1)) + 1);
      this.threepass.push(Math.floor(Math.random() * (6 - 1 + 1)) + 1);
      this.threepass.push(Math.floor(Math.random() * (2 - 1 + 1)) + 1);
      this.$nextTick(() => {
        this.initialize();
      });
    });
    // this.initialize();
  },
  methods: {
    initialize() {
      const myChart6 = echarts.init(this.$refs.myChart6, zhuti);
      const option4 = {
        // title: {
        //   text: "各班级挂科率",
        // },
        grid: {
          bottom: "25px",
          top: "25",
        },
        xAxis: {
          type: "category",
          data: this.semester,
        },
        legend: {
          left: "right",
          data: this.manyclass,
        },
        yAxis: {},
        tooltip: {
          //触发类型
          trigger: "axis", //item图形触发
          //坐标轴指示器
          axisPointer: {
            type: "shadow", //line显示一个实线 shadow阴影效果 cross十字准星
          },
          formatter: function (params) {
            var result = ""; // 初始化一个空字符串用于存储提示信息
            // console.log(params);
            for (var i = 0; i < params.length; i++) {
              var semester = params[i].name; // 获取学期信息
              var className = params[i].seriesName; // 获取班级信息
              var failRate = params[i].value; // 获取挂科率

              if (semester) {
                result +=
                  className + semester + "挂科率为" + failRate + "%<br>";
              } else {
                result += className + "挂科率为" + failRate + "%<br>";
              }
            }

            return result; // 返回拼接好的提示信息字符串
          },
        },
        markLine: {
          data: [
            {
              type: "average", //平均值
              name: "平均值",
            },
          ],
        },
        series: [
          {
            type: "line",
            name: "一班",
            data: this.onepass,
            //图表的标线
            markLine: {
              data: [
                {
                  type: "average", //平均值
                  name: "平均值",
                },
              ],
            },
          },
          {
            type: "line",
            name: "二班",
            data: this.twopass, //图表的标线
            markLine: {
              data: [
                {
                  type: "average", //平均值
                  name: "平均值",
                },
              ],
            },
          },
          {
            type: "line",
            name: "三班",
            data: this.threepass,

            //图表的标线
            markLine: {
              data: [
                {
                  type: "average", //平均值
                  name: "平均值",
                },
              ],
            },
          },
        ],
      };
      //4.设置图表绘制图表
      myChart6.setOption(option4);
      window.addEventListener("resize", function () {
        // 改变图表尺寸，在容器大小发生改变时需要手动调用
        myChart6.resize();
      });
    },
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.k4 {
  display: flex;
  flex-direction: column; /* 子组件内部垂直排列 */
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#passDiv {
  flex: 9;
  width: 100%;
  height: 100%;
  padding: 10px;
  /* border-radius: 10px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35); */
}
h3 {
  font-size: 18px;
  width: 100%;
  height: 100%;
  line-height: 100%;
  flex: 1;
  margin-bottom: 10px;
  color: aqua;
  /* padding-left: 25px;
  background-image: url("@/assets/title.png");
  background-repeat: no-repeat;
  background-size: contain; */
}
</style>
